<template>
    <el-menu v-show="UserManagerPanel" style="width: auto;">
            <el-menu-item>
              <div style="float: left;width: 14%">
                <p>账号</p>
              </div>
              <div style="float: left;width: 20%">
                <p>用户名</p>
              </div>
              <div style="float: left;width: 20%">
                <p>密码</p>
              </div>
              <div style="float: left;width: 10%">
                <p>文件管理权限</p>
              </div>
              <div style="float: left;width: 10%">
                <p>远程浏览权限</p>
              </div>
              <div style="float: left;width: 10%">
                <p>完全控制权限</p>
              </div>
              <div style="float: left;width: 14%">
                <el-button type="primary" style="vertical-align: middle; margin-left: 48%;" @click="createUser">新增用户</el-button>
              </div>
            </el-menu-item>
            <el-menu-item v-for="user in UserList" :key="user.Account">
              <div style="float: left;width: 14%">
                <p>{{ user.Account }}</p>
              </div>
              <div style="float: left;width: 20%">
                <el-input v-model="user.name" style="vertical-align: middle; width: 80%;" @change="updateUserName(user.name,user.Account)"></el-input>
              </div>
              <div style="float: left;width: 20%">
                <el-input v-model="user.Password" style="vertical-align: middle; width: 80%;" @change="updateUserPassword(user.Password,user.Account)" type="password"></el-input>
              </div>
              <div style="float: left;width: 10%">
                <el-switch v-model="user.DownloadFile" @change="updateUserPermission('DownloadFile', user.Account, user.DownloadFile)"></el-switch>
              </div>
              <div style="float: left;width: 10%">
                <el-switch v-model="user.RemoteControl" @change="updateUserPermission('RemoteControl', user.Account, user.RemoteControl)"></el-switch>
              </div>
              <div style="float: left;width: 10%">
                <el-switch v-model="user.Root" @change="updateUserPermission('Root', user.Account, user.Root)"></el-switch>
              </div>
              <div style="float: left;width: 14%">
                <el-button type="danger" style="vertical-align: middle; margin-left: 65%;" @click="deleteUser(user.Account)">删除</el-button>
              </div>
            </el-menu-item>
          </el-menu>
</template>
<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {
        
    },
})
</script>
